<script setup lang="ts">
  import ProModal from '@/components/ProModal';
  import { FormRules } from 'naive-ui';
  import { ref } from 'vue';
  interface Props {
    visible: boolean;
  }
  const model = ref({
    userName: '',
    loginId: '',
    password: '',
    picture: '',
    email: '',
    phone: '',
    departmentList: [],
    roleIdList: [],
  });
  defineEmits(['update:visible']);
  defineProps<Props>();

  const rules: FormRules = {
    userName: {
      required: true,
      message: '请输入姓名',
    },
    loginId: {
      required: true,
      message: '请输入账号',
    },
    password: {
      required: true,
      message: '请输入密码',
    },
    email: {
      required: true,
      message: '请输入密码',
    },
    departmentList: {
      required: true,
      message: '请选择部门',
    },
  };

  const onOk = async () => {};
</script>
<template>
  <ProModal
    title="新增管理员"
    :visible="visible"
    @update:visible="(e:boolean) => $emit('update:visible', e)"
    @ok="onOk"
    :width="660"
  >
    <n-form ref="formRef" :model="model" :rules="rules" label-placement="left" :label-width="76">
      <n-grid :cols="24" :x-gap="0">
        <n-form-item-gi :span="12" label="姓名" path="userName">
          <n-input v-model:value="model.userName" />
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="账号" path="loginId">
          <n-input v-model:value="model.loginId" />
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="密码" path="password">
          <n-input type="password" show-password-on="mousedown" v-model:value="model.password" />
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="邮箱" path="email">
          <n-input v-model:value="model.email" />
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="手机" path="phone">
          <n-input v-model:value="model.phone" />
        </n-form-item-gi>
        <n-form-item-gi :span="24" label="部门" path="departmentList">
          <n-tree-select
            multiple
            :options="[
              {
                label: '部门1',
                key: '1',
                children: [
                  {
                    label: '部门1-1',
                    key: '1-1',
                  },
                  {
                    label: '部门1-2',
                    key: '1-2',
                  },
                ],
              },
            ]"
            v-model:value="model.departmentList"
          />
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="头像" path="picture">
          <n-upload
            action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
            v-model:value="model.picture"
            list-type="image-card"
          >
            点击上传
          </n-upload>
        </n-form-item-gi>
        <n-form-item-gi :span="24" label="选择角色" path="roleIdList">
          <n-checkbox-group v-model:value="model.roleIdList">
            <n-space>
              <n-checkbox value="Beijing" label="北京" />
              <n-checkbox value="Shanghai" label="上海" />
              <n-checkbox value="Guangzhou" label="广州" />
              <n-checkbox value="Shenzen" label="深圳" />
            </n-space>
          </n-checkbox-group>
        </n-form-item-gi>
      </n-grid>
    </n-form>
  </ProModal>
</template>

<style scoped></style>
